<template>
    <div>
        <el-row class="mb8" :gutter="10">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addUser">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="exportExcel">导出</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="importExcel">导入</el-button>
            </el-col>
        </el-row>
        <div class="common-table">
            <el-table :data="tableData" stripe :height="650">
                <el-table-column type="index" label="序号" align="center" width="50"> </el-table-column>
                <el-table-column
                    show-overflow-tooltip
                    v-for="item in tableLabel"
                    :key="item.prop"
                    :label="item.label"
                    :width="item.width ? item.width : 200"
                    align="center"
                >
                    <template slot-scope="scope">
                        <span style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.userId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--      <div>
        <i class="fa fa-weixin fa-lg"></i>
        <el-button
          v-hasPermi="['test']"
          @click="good1"
        >
          3333
        </el-button>
      </div>-->
            <div>
                <pagination
                    v-show="total > 0"
                    :total="total"
                    :page.sync="queryParams.pageNum"
                    :limit.sync="queryParams.pageSize"
                    @pagination="initTableList"
                />
            </div>
        </div>
        <!-- 用户导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload
                ref="upload"
                :limit="1"
                accept=".xlsx, .xls"
                :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport"
                :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :auto-upload="false"
                drag
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip text-center" slot="tip">
                    <div class="el-upload__tip" slot="tip">
                        <el-checkbox v-model="upload.updateSupport" />
                        是否更新已经存在的用户数据
                    </div>
                    <span>仅允许导入xls、xlsx格式文件。</span>
                    <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate"
                        >下载模板</el-link
                    >
                </div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>
        <add-or-update-user ref="addOrUpdate" @initTableList="initTableList"></add-or-update-user>
    </div>
</template>

<script>
import { delUser, getUsers } from '@/api/data'
import addOrUpdateUser from '@/views/user/addOrUpdateUser'
import { test } from '@/api/login'
import cache from '@/plugins/cache'
export default {
    name: 'index',
    components: {
        addOrUpdateUser
    },
    data() {
        return {
            searchForm: {
                keyword: ''
            },
            tableData: [],
            total: 0,
            tableLabel: [
                {
                    prop: 'userName',
                    label: '登录名'
                },
                {
                    prop: 'userId',
                    label: '用户id'
                }
            ],
            // 用户导入参数
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: '',
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                // headers: { token: this.$cookie.get('token') },
                headers: { token: cache.session.getJSON('token') },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + '/user/importData'
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10
            }
        }
    },
    methods: {
        good1() {
            test({ password: 4444, userName: '4444aaa4' }).then((res) => {
                this.$message(res.data.msg)
            })
        },
        addUser() {
            this.$refs.addOrUpdate.dialog = true
            this.$refs.addOrUpdate.title = 'add'
            this.$refs.addOrUpdate.user = {}
        },
        initTableList() {
            getUsers(this.queryParams).then((res) => {
                this.tableData = res.data.rows
                this.total = res.data.total
            })
        },
        handleEdit(row) {
            this.$refs.addOrUpdate.dialog = true
            this.$refs.addOrUpdate.title = 'edit'
            this.$refs.addOrUpdate.user = JSON.parse(JSON.stringify(row))
        },
        handleDelete(id) {
            this.$confirm('此操作将永久删除该数据，是否继续', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    delUser(id).then(() => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.initTableList()
                    })
                })
                .catch(() => {
                    this.$message({
                        message: '已取消删除',
                        type: 'info'
                    })
                })
        },
        exportExcel() {
            this.download('user/export', {}, `user_${new Date().getTime()}.xlsx`)
        },
        importExcel() {
            this.upload.title = '用户导入'
            this.upload.open = true
        },
        /** 下载模板操作 */
        importTemplate() {
            this.download('user/exportModel', {}, `user_${new Date().getTime()}.xlsx`)
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false
            this.upload.isUploading = false
            this.$refs.upload.clearFiles()
            this.$alert(
                "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>',
                '导入结果',
                { dangerouslyUseHTMLString: true }
            )
            this.initTableList()
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit()
        }
    },
    created() {
        this.initTableList()
    }
}
</script>
